<!--  -->
<template>
  <div v-if="Object.keys(detailInfo).length !== 0">
    <div class="info-text-wrap">
			<div class="text-top-style"></div>
			<div class="desc info-text-desc">{{detailInfo.desc}}</div>
			<div class="text-bot-style"></div>
		</div>
		<div class="img-list-wrap" v-for="item in detailInfo.detailImage" :key="item.index">
			<div class="desc">{{item.key}}</div>
			<div v-for="(item, index) in item.list" :key="index">
				<img :src="item" alt="" class="img" @load="imgLoad">
			</div>
		</div>
  </div>
</template>

<script>
export default {
  name: 'DetailGoodsInfo',
  props:{
    detailInfo:{
      type:Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {

    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    
  },
  methods:{
    imgLoad(){
      this.$emit('imgLoad')
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.info-text-wrap{
  position: relative;
}
.text-top-style {
  width: 60px;
  height: 1px;
  background-color: #333;
  margin-left: 4px;
}
.text-top-style::before{
  position: absolute;
  left: 4px;
  top: -2.5px;
  display: block;
  content: '';
  width: 5px;
  height: 5px;
  background-color: #333;
}
.text-bot-style {
  width: 60px;
  height: 1px;
  background-color: #333;
  position: absolute;
  right: 4px;
  bottom: 0;
}
.text-bot-style::after{
  position: absolute;
  right: 0;
  top: -2.5px;
  display: block;
  content: '';
  width: 5px;
  height: 5px;
  background-color: #333;
}
.info-text-desc {
  padding: 10px 4px;
}
.desc {
  font-size: 14px;
  padding-bottom: 6px;
  line-height: 20px;
  margin: 4px 0;
  text-indent: 10px;
}
.img {
  width: 100%;
}
</style>
